<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>光宗耀祖 - AI管理系统</title>
    <meta name="description" content="AI赋能的后台管理框架">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">
        :root {
            --primary-color: #00d8ff;
            --primary-light: rgba(0, 216, 255, 0.2);
            --secondary-color: #6e00ff;
            --dark-color: #0a192f;
            --darker-color: #071120;
            --light-color: #ccd6f6;
            --lighter-color: #e6f1ff;
            --accent-color: #64ffda;
            --accent-light: rgba(100, 255, 218, 0.1);
        }

        body {
            background-color: var(--darker-color);
            color: var(--light-color) !important;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            overflow-x: hidden;
            background-image:
                radial-gradient(circle at 20% 30%, rgba(110, 0, 255, 0.1) 0%, transparent 25%),
                radial-gradient(circle at 80% 70%, rgba(0, 216, 255, 0.1) 0%, transparent 25%),
                radial-gradient(circle at 80% 30%, rgba(100, 255, 218, 0.1) 0%, transparent 25%),
                radial-gradient(circle at 20% 70%, rgba(100, 255, 218, 0.1) 0%, transparent 25%);
        }

        .signin-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }

        .signinpanel {
            width: 900px;
            background: rgba(10, 25, 47, 0.9);
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(0, 216, 255, 0.3);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(100, 255, 218, 0.2);
            overflow: hidden;
            position: relative;
            display: flex;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .signinpanel:hover {
            transform: translateY(-5px);
            box-shadow: 0 25px 60px rgba(0, 216, 255, 0.4);
        }

        .signinpanel::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                45deg,
                transparent 0%,
                var(--primary-light) 50%,
                transparent 100%
            );
            animation: rotate 30s linear infinite;
            z-index: -1;
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .panel-section {
            flex: 1;
            padding: 40px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .info-section {
            background: linear-gradient(135deg, rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.7));
            border-right: 1px solid var(--accent-light);
        }

        .form-section {
            background: linear-gradient(135deg, rgba(10, 25, 47, 0.7), rgba(10, 25, 47, 0.9));
        }

        .panel-section::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%2364ffda" stroke-width="0.5" stroke-dasharray="5,5"/></svg>');
            opacity: 0.05;
            pointer-events: none;
        }

        .signin-info h4, .signin-info ul li, .signin-info strong,
        .no-margins, .m-t-md, .checkbox-custom label, .signup-footer {
            color: var(--light-color) !important;
        }

        h1, h4, p, li, a, strong, label {
            color: var(--light-color) !important;
        }

        .logopanel {
            text-align: center;
            margin-bottom: 40px;
        }

        .logopanel h1 img {
            filter: drop-shadow(0 0 15px rgba(0, 216, 255, 0.6));
            transition: all 0.4s ease;
            width: 150px;
            height: auto;
        }

        .logopanel h1 img:hover {
            transform: scale(1.1);
            filter: drop-shadow(0 0 20px rgba(0, 216, 255, 0.8));
        }

        .signin-info ul {
            list-style: none;
            padding: 0;
            margin: 30px 0;
        }

        .signin-info ul li {
            position: relative;
            padding-left: 30px;
            margin-bottom: 15px;
            font-size: 15px;
            line-height: 1.6;
        }

        .signin-info ul li::before {
            content: "▹";
            position: absolute;
            left: 0;
            color: var(--accent-color);
            font-size: 18px;
        }

        .signin-info ul li i {
            margin-right: 8px;
            color: var(--primary-color);
            width: 20px;
            text-align: center;
        }

        input.form-control {
            background-color: rgba(100, 255, 218, 0.05);
            border: 1px solid rgba(100, 255, 218, 0.3);
            color: var(--lighter-color);
            border-radius: 8px;
            padding: 14px 20px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            font-size: 15px;
        }

        input.form-control:focus {
            background-color: rgba(100, 255, 218, 0.1);
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(0, 216, 255, 0.2);
            color: white;
        }

        input.form-control::placeholder {
            color: rgba(204, 214, 246, 0.6);
        }

        .input-group-addon {
            background-color: rgba(100, 255, 218, 0.1);
            border: 1px solid rgba(100, 255, 218, 0.3);
            border-right: none;
            color: var(--light-color) !important;
            transition: all 0.3s ease;
        }

        .btn-success {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border: none;
            border-radius: 8px;
            padding: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            font-size: 15px;
            margin-top: 10px;
        }

        .btn-success:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 216, 255, 0.5);
        }

        .btn-success::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.6s ease;
        }

        .btn-success:hover::before {
            left: 100%;
        }

        .imgcode {
            border-radius: 8px;
            border: 1px solid rgba(100, 255, 218, 0.4);
            transition: all 0.3s ease;
            height: 40px;
            object-fit: cover;
        }

        .imgcode:hover {
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(0, 216, 255, 0.6);
        }

        .signup-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            border-top: 1px solid rgba(100, 255, 218, 0.2);
            padding: 15px 40px;
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            background: rgba(10, 25, 47, 0.7);
        }

        .signup-footer a {
            color: var(--accent-color) !important;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .signup-footer a:hover {
            text-decoration: underline;
            color: var(--primary-color) !important;
        }

        /* AI元素样式 */
        .ai-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background-color: var(--primary-color);
            border-radius: 50%;
            pointer-events: none;
            z-index: -1;
            filter: blur(1px);
        }

        .ai-circuit {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0.1;
        }

        .ai-circuit path {
            stroke: var(--primary-color);
            stroke-width: 1;
            fill: none;
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dash 40s linear infinite;
        }

        .ai-voice-wave {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0.05;
        }

        .ai-voice-wave path {
            fill: none;
            stroke: var(--accent-color);
            stroke-width: 1;
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dash 30s linear infinite reverse;
        }

        /* 对称装饰元素 */
        .decorator {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.15;
            z-index: -1;
        }

        .decorator-1 {
            background: var(--primary-color);
            top: -100px;
            left: -100px;
            animation: float 12s ease-in-out infinite;
        }

        .decorator-2 {
            background: var(--secondary-color);
            bottom: -100px;
            right: -100px;
            animation: float 15s ease-in-out infinite reverse;
        }

        .decorator-3 {
            background: var(--accent-color);
            top: 50%;
            right: -100px;
            transform: translateY(-50%);
            width: 150px;
            height: 150px;
            animation: float 18s ease-in-out infinite 2s;
        }

        .decorator-4 {
            background: var(--primary-color);
            bottom: 50%;
            left: -100px;
            transform: translateY(50%);
            width: 150px;
            height: 150px;
            animation: float 14s ease-in-out infinite reverse 1s;
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(20px, 20px); }
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .signinpanel {
                flex-direction: column;
                width: 90%;
                max-width: 500px;
            }

            .panel-section {
                padding: 30px;
            }

            .info-section {
                border-right: none;
                border-bottom: 1px solid var(--accent-light);
            }

            .decorator-3, .decorator-4 {
                display: none;
            }
        }

        @media (max-width: 576px) {
            .panel-section {
                padding: 25px;
            }

            .signup-footer {
                flex-direction: column;
                text-align: center;
                gap: 5px;
                padding: 10px;
            }
        }
    </style>
    <script>
        if(window.top!==window.self){alert('未登录或登录超时。请重新登录');window.top.location=window.location};
    </script>
</head>
<body class="signin">
<!-- 对称装饰元素 -->
<div class="decorator decorator-1"></div>
<div class="decorator decorator-2"></div>
<div class="decorator decorator-3"></div>
<div class="decorator decorator-4"></div>

<!-- AI粒子背景 -->
<div id="ai-particles"></div>

<!-- AI电路板背景 -->
<svg class="ai-circuit" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0,0 L100,100 M0,100 L100,0 M50,0 L50,100 M0,50 L100,50
            M25,0 L25,100 M75,0 L75,100 M0,25 L100,25 M0,75 L100,75
            M10,0 L10,100 M90,0 L90,100 M0,10 L100,10 M0,90 L100,90"/>
</svg>

<!-- AI声波背景 -->
<svg class="ai-voice-wave" viewBox="0 0 500 100" preserveAspectRatio="none">
    <path d="M0,50 C50,10 100,90 150,50 S250,10 300,50 S400,90 450,50 S550,10 600,50"/>
</svg>

<div class="signin-container">
    <div class="signinpanel">
        <div class="panel-section info-section">
            <div class="signin-info">
                <div class="logopanel m-b">
                    <h1 class="animate__animated animate__fadeIn">
                        <img alt="[ 光宗耀祖 ]" src="../static/ruoyi.png" th:src="@{/ruoyi.png}">
                    </h1>
                </div>
                <h4 class="animate__animated animate__fadeIn animate__delay-1s">欢迎使用 <strong>AI管理系统</strong></h4>
                <ul class="m-b animate__animated animate__fadeIn animate__delay-2s">
                    <li><i class="fa fa-microchip"></i> 管理：谢宝乐</li>
                    <li><i class="fa fa-brain"></i> 总裁：孙晓圆</li>
                    <li><i class="fa fa-coins"></i> 财务：孙梦莹</li>
                    <li><i class="fa fa-network-wired"></i> 运营：王振辉</li>
                    <li><i class="fa fa-bullhorn"></i> 宣传：王召权</li>
                    <li><i class="fa fa-robot"></i> 后勤：赵嘉铭</li>
                </ul>
                <strong class="animate__animated animate__fadeIn animate__delay-3s" th:if="${isAllowRegister}">
                    还没有账号？ <a th:href="@{/register}" style="color: var(--accent-color);">立即注册&raquo;</a>
                </strong>
            </div>
        </div>
        <div class="panel-section form-section">
            <form id="signupForm" autocomplete="off" class="animate__animated animate__fadeIn animate__delay-1s">
                <h4 class="no-margins">AI系统登录</h4>
                <p class="m-t-md">"智能赋能，未来已来"</p>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
                        <input type="text" name="username" class="form-control uname" placeholder="用户名" value="admin"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                        <input type="password" name="password" class="form-control pword" placeholder="密码" value="admin123"/>
                    </div>
                </div>
                <div class="row m-t" th:if="${captchaEnabled==true}">
                    <div class="col-xs-6">
                        <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5"/>
                    </div>
                    <div class="col-xs-6">
                        <a href="javascript:void(0);" title="点击更换验证码">
                            <img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
                        </a>
                    </div>
                </div>
                <div class="checkbox-custom" th:if="${isRemembered}" th:classappend="${captchaEnabled==false} ? 'm-t'">
                    <input type="checkbox" id="rememberme" name="rememberme">
                    <label for="rememberme"><i class="fa fa-memory"></i> 记住我</label>
                </div>
                <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍候...">
                    <i class="fa fa-sign-in-alt"></i> 登录
                </button>
                <div class="text-center m-t">
                    <a href="#" style="color: var(--accent-color);"><i class="fa fa-key"></i> 忘记密码?</a>
                </div>
            </form>
        </div>
        <div class="signup-footer">
            <div>
                <i class="fa fa-code-branch"></i> https://gitee.com/sun-xiaoyuan123/pims5
            </div>
            <div>
                <i class="fa fa-shield-alt"></i> AI安全防护系统 v2.0
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; var captchaEnabled = [[${captchaEnabled}]];</script>
<!--[if lte IE 8]><script>window.location.href=ctx+'html/ie.html';</script><![endif]-->
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.8.0}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>

<!-- AI粒子效果脚本 -->
<script>
    $(document).ready(function() {
        // 创建AI粒子
        function createParticles() {
            const particleCount = 100;
            const container = $('#ai-particles');

            for (let i = 0; i < particleCount; i++) {
                const size = Math.random() * 4 + 2;
                const particle = $('<div class="ai-particle"></div>');
                particle.css({
                    left: Math.random() * 100 + 'vw',
                    top: Math.random() * 100 + 'vh',
                    width: size + 'px',
                    height: size + 'px',
                    opacity: Math.random() * 0.5 + 0.1,
                    backgroundColor: i % 3 === 0 ? 'var(--primary-color)' :
                                    i % 3 === 1 ? 'var(--secondary-color)' : 'var(--accent-color)'
                });

                container.append(particle);

                // 粒子动画
                animateParticle(particle);
            }
        }

        function animateParticle(particle) {
            const duration = Math.random() * 30000 + 15000;
            const newX = Math.random() * 100;
            const newY = Math.random() * 100;

            particle.animate({
                left: newX + 'vw',
                top: newY + 'vh'
            }, duration, 'linear', function() {
                animateParticle($(this));
            });
        }

        createParticles();

        // 登录表单悬停效果
        $('.signinpanel').hover(
            function() {
                $(this).css('transform', 'translateY(-10px)');
                $(this).css('box-shadow', '0 30px 60px rgba(0, 216, 255, 0.4)');
            },
            function() {
                $(this).css('transform', 'translateY(-5px)');
                $(this).css('box-shadow', '0 20px 50px rgba(0, 216, 255, 0.3)');
            }
        );

        // 输入框聚焦效果
        $('input.form-control').focus(function() {
            $(this).parent().find('.input-group-addon').css({
                'color': 'var(--primary-color)',
                'background-color': 'rgba(0, 216, 255, 0.2)',
                'border-color': 'var(--primary-color)'
            });
        }).blur(function() {
            $(this).parent().find('.input-group-addon').css({
                'color': 'var(--light-color)',
                'background-color': 'rgba(100, 255, 218, 0.1)',
                'border-color': 'rgba(100, 255, 218, 0.3)'
            });
        });

        // 添加对称的波纹点击效果
        $('body').on('click', function(e) {
            const ripple = $('<div class="ai-particle"></div>');
            ripple.css({
                left: e.pageX + 'px',
                top: e.pageY + 'px',
                width: '0',
                height: '0',
                opacity: '0.8',
                backgroundColor: 'var(--primary-color)',
                transform: 'translate(-50%, -50%)',
                borderRadius: '50%',
                position: 'absolute',
                zIndex: '9999',
                pointerEvents: 'none'
            });

            $('body').append(ripple);

            ripple.animate({
                width: '200px',
                height: '200px',
                opacity: '0'
            }, 1000, function() {
                ripple.remove();
            });
        });
    });
</script>
</body>
</html>